<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Chinese Migration Children</title>

    <link rel="shortcut icon" href="img/4043250_avatar_child_girl_kid_icon.ico" type="image/x-icon">
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link href="css/3-col-portfolio.css" rel="stylesheet">

    <!-- Fonts -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata" />
    <link href="https://fonts.googleapis.com/css?family=Catamaran&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Mukta:300,400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,500,600,700&display=swap" rel="stylesheet">


    <style>
        body {
            overflow-x: hidden;
            /* overflow-y: hidden; */
        }

        .aboutimg {
            float: right;
            margin-right: 10px;
            margin-bottom: 10px;
            max-width: 250px;
        }

        footer {
            margin-top: 50px;
            padding: 20px 0;
            margin-left: 20%;
            margin-right: 20%;
            /* background-color: #f8f9fa; */
            color: #343a40;
            text-align: center;
        }
    </style>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R84F1GN2FV"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-R84F1GN2FV');
    </script>
</head>

<body>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Header -->
        <div class="row text-center">
            <li><img src="img/china migration.png" style="max-width:30%;"></li>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <h1>Chinese Migration Children</h1>
                <a class="about" data-toggle="modal" data-target="#info-modal">
                    <p style="text-align:center; margin-top:20px;">About</p>
                </a>
                <hr>
            </div>
        </div>

        <div class="modal fade" id="info-modal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <p class="modal-title" style="font-size:30px;">About</p>
                    </div>
                    <div class="modal-body">
                        <p><img class="aboutimg" src="img/me.jpg" /> Welcome to the "Chinese Migration
                            Children Awareness
                            Platform," a dedicated
                            web application designed
                            to enhance public
                            understanding and awareness of the lives and challenges faced by migrant children. As
                            China's urbanization accelerates,
                            an increasing number of children move with their families from rural areas to cities,
                            encountering new environments and
                            cultures. Their adaptation process is filled with both difficulties and opportunities. This
                            application aims to provide
                            a multifaceted view of migrant children's lives, including public perceptions on social
                            media, survey results, the
                            distribution of schools in Beijing that accommodate migrant children, and inclusive pedagogy
                            methods, helping users gain
                            a deeper understanding of this unique group.</p>
                        <p>Through interactive quizzes, data analysis, and map displays, we aim to educate users about
                            the adaptation experiences
                            of migrant children and the challenges they face in new environments. Our goal is to
                            encourage greater societal
                            attention and support for migrant children, ensuring they have access to better living
                            conditions and educational
                            resources.</p>
                    </div>
                    <div class="modal-footer">
                        <p>Created by Muhan "Astoria" Wang</p>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Projects Row -->
        <div class="row no-gutter" style="margin-bottom: 50px;">
            <div class="col-xs-12 col-sm-4 portfolio-item">
                <div class="col-sm-6 portfolio-item">
                    <a href="perception.html" target="_self">
                        <img class="img-responsive" src="img/public perception.png" alt="">
                    </a>
                </div>
                <div class="col-sm-6 portfolio-item">
                    <h4>
                        <a href="perception.html" target="_self">Public Perception</a>
                    </h4>
                    <p style="padding-right:20px; margin-top:-5px; font-size:16px;">Explore how public perception of
                        migrant children is shaped and reflected through social media data.</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 d portfolio-item col-centered">
                <div class="col-sm-6 portfolio-item">
                    <a href="survey.html" target="_self">
                        <img class="img-responsive" src="img/survey.png" alt="">
                    </a>
                </div>
                <div class="col-sm-6 portfolio-item">
                    <h4>
                        <a href="survey.html" target="_self">Survey</a>
                    </h4>
                    <p style="padding-right:20px; margin-top:-5px; font-size:16px;">Learn about the survey process,
                        data, and results on the living conditions and adaptation patterns of migrant children.</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 d portfolio-item col-centered">
                <div class="col-sm-6 portfolio-item">
                    <a href="map.html" target="_self">
                        <img class="img-responsive" src="img/map.png" alt="">
                    </a>
                </div>
                <div class="col-sm-6 portfolio-item">
                    <h4>
                        <a href="map.html" target="_self">Map</a>
                    </h4>
                    <p style="padding-right:20px; margin-top:-5px; font-size:16px;">View a map showing the distribution
                        of schools in Beijing that accommodate migrant children.</p>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row no-gutter" style="margin-bottom: 50px;">
            <div class="col-xs-12 col-sm-4 portfolio-item">
                <div class="col-sm-6 portfolio-item">
                    <a href="pedagogy.html" target="_self">
                        <img class="img-responsive" src="img/pedegogy.png" alt="">
                    </a>
                </div>
                <div class="col-sm-6 portfolio-item">
                    <h4>
                        <a href="pedagogy.html" target="_self">Inclusive Pedagogy</a>
                    </h4>
                    <p style="padding-right:20px; margin-top:-5px; font-size:16px;">Discover inclusive pedagogy methods
                        that support the educational needs of migrant children.</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 d portfolio-item col-centered">
                <div class="col-sm-6 portfolio-item">
                    <a href="test.html" target="_self">
                        <img class="img-responsive" src="img/test.png" alt="">
                    </a>
                </div>
                <div class="col-sm-6 portfolio-item">
                    <h4>
                        <a href="test.html" target="_self">Test Your Knowledge</a>
                    </h4>
                    <p style="padding-right:20px; margin-top:-5px; font-size:16px;">Engage with interactive quizzes to
                        learn more about migrant children and their experiences.</p>
                </div>
            </div>
        </div>
        <!-- /.row -->

    </div>
    <!-- /.row -->

    <hr>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-md-12">
                <p>&copy; 2024 Astoria "Muhan" Wang. All rights reserved.</p>
                <p><strong>Acknowledgment: </strong>Most of the images used in this application have been sourced from
                    the
                    internet. We sincerely thank the online
                    community for their contributions and support. Additionally, many photos have been taken from
                    schools in Beijing
                    that accept migrant children, collected during my time as a volunteer. Your cooperation and support
                    are greatly
                    appreciated.</p>

                <a href="https://www.bcis.cn/" target="_self"><img width="180px" src="img/lecheng.png"
                        style="max-width:20%;"></a>
            </div>
        </div>
        <!-- /.row -->
    </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>